<template>
  <div class="cart">
    <div class="content">
     

      <div class="main">
        <CartDetailsVue :carList="carList" v-if="isShow"  />
        <Empty v-else/>
      </div>
    </div>
  
  </div>
</template>

<script>
import { onMounted, ref,computed} from "vue";

import { useStore } from "vuex";
import Footer from "../../components/footer";
import Empty from "../../components/Empty";
import CartDetailsVue from './components/CartDetails';
export default {
  components: {
    Footer,
    Empty,
    CartDetailsVue
  },  
  setup() {

    const store = useStore();
    let isShow = ref(true);
    const carList= computed(() => store.state.countAbout.carList);
    const init = () => {
      if (carList.value.length === 0) {
        isShow.value = false;
      }
    };

    const countPrice=computed(()=>{
      let countP = 0
      carList.value.forEach((item) => {
        countP += item.num * item.price;
      });
      return countP * 100;
    })
    onMounted(() => {
      init();
    });
    return {

      countPrice,
      carList,
      isShow,
    };
  },
};
</script>

<style lang="less" scoped>
.cart {
  display: flex;
  flex-flow: column;
  height: 100%;
  .content {
    flex: 1;
    overflow-y: auto;
    .main {
      padding: 0 10px;
    }
  }
}
.van-submit-bar {
  border: 0.5px solid #eee;
}
</style>